<template>
	<view class="content" style="padding-top: 0upx;">

		<!-- #ifdef MP-WEIXIN -->
		<!-- <view class="subscription-notice" v-if="suTip">
			<view>
				<image class="icon" src="/static/image/subscription-tip.png" mode=""></image>
				<text>订阅消息，及时获取订单最新动态</text>
			</view>
			<view>
				<text class="subscription-notice-btn red-price" @click="toSubscription()">消息订阅</text>
				<text class="subscription-notice-btn-close" @click="toClose()">×</text>
			</view>
		</view> -->
		<!-- #endif -->

		<jshop :jdata="pageData"></jshop>
		
		<view class="imgnavbar">
			<view class="imgnavbar-list" 
			 v-bind:class="'row'+goods_cat_num">
				<view class="imgnavbar-item" ref="imgwitem" v-for="(item, index) in goods_cat" :key="index">
					<image class="imgnavbar-item-img" :src="item.image_name" mode="aspectFill" @click="showSliderInfo(item.id)"></image>
					<view class="imgnavbar-item-text">{{item.name}}</view>
				</view>
			</view>
		</view>
		
		<view class="index-goods">
			<view class='img-grids bottom-cell-group askl' style="padding-bottom: 20px;">
				<view class='cell-item right-img' >
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>热门商品</view>
					</view>
				</view>
				<view class="" >
					<view class="img-grids-item" v-for="item in hot_res" :key="item.id" @click="goodsDetail(item.id)">
						<image
							class="img-grids-item-t have-none"
							:src="item.image_url"
							mode='aspectFill'
						></image>
						<view class="img-grids-item-b">
							<view class="goods-name grids-goods-name">
								{{item.name}}
							</view>
							<view class="goods-item-c">
								<view class="goods-price red-price">积分: {{ item.init }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>	
		</view>
		
		<view class="index-goods">
			<view class='img-grids bottom-cell-group askl'>
				<view class='cell-item right-img' >
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>推荐商品</view>
					</view>
				</view>
				<view class="" >
					<view class="img-grids-item" v-for="item in recommend_res" :key="item.id" @click="goodsDetail(item.id)">
						<image
							class="img-grids-item-t have-none"
							:src="item.image_url"
							mode='aspectFill'
						></image>
						<view class="img-grids-item-b">
							<view class="goods-name grids-goods-name">
								{{item.name}}
							</view>
							<view class="goods-item-c">
								<view class="goods-price red-price">积分: {{ item.init }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>	
		</view>
		
		
		<view class="index-goods" v-for="item in goods_cat"  >
			<view class='img-grids bottom-cell-group askl'>
				<view class='cell-item right-img' >
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>{{item.name}}</view>
					</view>
				</view>
				<view class="" >
					<view class="img-grids-item" v-for="item2 in item.child_goods" :key="item2.id" @click="goodsDetail(item2.id)">
						<image
							class="img-grids-item-t have-none"
							:src="item2.image_url"
							mode='aspectFill'
						></image>
						<view class="img-grids-item-b">
							<view class="goods-name grids-goods-name">
								{{item2.name}}
							</view>
							<view class="goods-item-c">
								<view class="goods-price red-price">积分: {{item2.init}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>	
		</view>
		
		
		<jihaiCopyright v-if="copy"></jihaiCopyright>
		<!-- #ifdef H5 || APP-PLUS-NVUE || APP-PLUS -->
		<!-- 客服 -->
		<!-- <view class="service" @click="showChat()">
			<image class="icon" src="/static/image/seller-content.png" mode=""></image>
		</view> -->
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <button class="service" hover-class="none" open-type="contact" bindcontact="showChat" :session-from="kefupara">
			<image class="icon" src="/static/image/seller-content.png" mode=""></image>
		</button> -->
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<!-- <contact-button class="service icon" icon="/static/image/seller-content.png" size="80rpx*80rpx" tnt-inst-id="WKPKUZXG"
		 scene="SCE00040186" hover-class="none" /> -->
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<!-- 头条客服 -->
		<!-- #endif -->
		<red-bag v-if="redBagShow" @click="handleGet"></red-bag>

		<view class="base">
			<view class="store" v-for="(item,index) in sites" :key="index"  @click="hreftwo(item.name)">
				<view class="store-img">
					<img :src="item.img">
				</view>
				<view class="tetx" >{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>
<script>
	import jshop from '@/components/jshop/jshop.vue';
	import jshopgoodstwo from '@/components/jshop/jshop-goods-two.vue';
	import jihaiCopyright from '@/components/jihai-copyright/jihaiCopyright.vue';
	import uniCountdown from '@/components/uni-countdown/uni-countdown.vue';
	import redBag from '@/components/red-bag/index';
	import {
		goods
	} from '@/config/mixins.js';
	import {
		goBack
	} from '@/config/mixins.js';
	export default {
		mixins: [goods],
		components: {
			jihaiCopyright,
			jshop,
			uniCountdown,
			redBag
		},
		data() {
			return {
				product: {}, // 规格详情
				goodsInfo: {}, // 商品详情

				imageUrl: '/static/image/share_image.png', //店铺分享图片
				pageData: [  ],
				pageCode: 'mobile_home', //页面布局编码
				pintuan: [], //拼团列表,
				redBagShow: false, //红包
				config: '', //配置信息
				userInfo: {}, // 用户信息
				kefupara: '', //客服传递资料
				copy: false,
				suTipStatus: false,
				shareUrl: '/pages/share/jump',
				hot_res:[],
				recommend_res:[],

				sites: [
					{ name: "首页", img: require("../../static/image/index_gray.png") },
					{ name: "分类", img: require("../../static/image/classify_gray.png")  },
					{ name: "房象找新房", img: require("../../static/image/default.png")  },
					{ name: "购物车", img: require("../../static/image/ic-me-car.png")  },
					{ name: "我的", img: require("../../static/image/user_gray.png") },
					// { name: "贷款计算", img: require("../../static/img00/ji.png") },
				],
				goods_cat:[],
				goods_cat_num:4
			};
			
		},
		
		updated() {
			this.copy = true;
		},
		computed: {
			appTitle() {
				return this.$store.state.config.shop_name;
			},
			// 获取店铺联系人手机号
			shopMobile() {
				return this.$store.state.config.shop_mobile || 0;
			},
			suTip() {
				return this.suTipStatus;
			}
		},
		onLoad(e) {
			// uni.hideTabBar();
			this.initData();
			if (this.$store.state.config.shop_name) {
				uni.setNavigationBarTitle({
					title: this.$store.state.config.shop_name || ''
				});
			}
			// 分享朋友和朋友圈
			// #ifdef H5
			if (this.$common.isWeiXinBrowser()) {
				this.shareAll()
			}
			// #endif
		},
		onShow() {
			// #ifdef MP-WEIXIN
			this.userIsSubscription();
			// #endif
		},
		methods: {
			showSliderInfo(goods_cat_id) {
				this.$common.navigateTo('/pages/classify/index?id='+goods_cat_id);
				
			},
			
			//领取红包
			handleGet() {},
			destroyed() {
				window.removeEventListener('scroll', this.handleScroll);
			},
			goSearch() {
				uni.navigateTo({
					url: './search'
				});
			},
			// 首页初始化获取数据
			initData() {
				//获取首页配置
				this.$api.getPageConfig({
						code: this.pageCode
					},
					res => {
						if (res.status == true) {
							this.pageData = res.data.items;
							var arr = this.pageData[1].params.list;
							for(var i = 0; i<arr.length;i++){
								arr[i].image = "http://xinfangvip.com/"+arr[i].image;
							}
							// console.log(this.pageData);
							this.hot_res = res.hot_res;
							this.recommend_res = res.recommend_res;
							this.goods_cat = res.goods_cat;
							this.goods_cat_num = res.goods_cat_num;
							console.log(res);
							//隐藏loading
							setTimeout(() => {
								this.showLoad = false;
							}, 600);
						}
					}
				);

				//判断是开启分销还是原始推广
				this.$api.shopConfig(res => {
					this.config = res;
					// console.log(this.config);
				});

				var _this = this;
				if (this.$db.get('userToken')) {
					this.$api.userInfo({}, res => {
						if (res.status) {
							_this.userInfo = res.data;
							// #ifdef MP-WEIXIN
							//微信小程序打开客服时，传递用户信息
							var kefupara = {};
							kefupara.nickName = res.data.nickname;
							kefupara.tel = res.data.mobile;
							_this.kefupara = JSON.stringify(kefupara);
							// #endif
						}
					});
				}

				// #ifdef MP-WEIXIN
				this.userIsSubscription();
				// #endif

				this.getShareUrl();
			},
			//在线客服,只有手机号的，请自己替换为手机号
			showChat() {
				// #ifdef H5
				let _this = this;
				window._AIHECONG('ini', {
					entId: this.config.ent_id,
					button: false,
					appearance: {
						panelMobile: {
							tone: '#FF7159',
							sideMargin: 30,
							ratio: 'part',
							headHeight: 50
						}
					}
				});
				//传递客户信息
				window._AIHECONG('customer', {
					head: _this.userInfo.avatar,
					名称: _this.userInfo.nickname,
					手机: _this.userInfo.mobile
				});
				window._AIHECONG('showChat');
				// #endif

				// 客服页面
				// #ifdef APP-PLUS || APP-PLUS-NVUE
				this.$common.navigateTo('/pages/member/customer_service/index');
				// #endif

				// 头条系客服
				// #ifdef MP-TOUTIAO
				if (this.shopMobile != 0) {
					let _this = this;
					tt.makePhoneCall({
						phoneNumber: this.shopMobile.toString(),
						success(res) {},
						fail(res) {}
					});
				} else {
					_this.$common.errorToShow('暂无设置客服电话');
				}
				// #endif
			},
			//前往订阅
			toSubscription() {
				this.$common.navigateTo('/pages/member/setting/subscription/index');
			},
			//查询用户订阅
			userIsSubscription() {
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					this.$api.subscriptionIsTip(res => {
						if (res.status) {
							if (res.data) {
								this.suTipStatus = true;
							} else {
								this.suTipStatus = false;
							}
						} else {
							this.suTipStatus = true;
						}
					});
				} else {
					this.suTipStatus = true;
				}
			},
			//关闭订阅
			toClose() {
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					this.$api.subscriptionCloseTip(res => {
						this.suTipStatus = false;
					});
				} else {
					this.suTipStatus = false;
				}
			},
			//获取分享URL
			getShareUrl() {
				let data = {
					client: 2,
					url: "/pages/share/jump",
					type: 1,
					page: 1,
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data['token'] = userToken;
				}
				this.$api.share(data, res => {
					this.shareUrl = res.data
				});
			},
			// 分享到朋友或朋友圈
			shareAll() {
				// 微信浏览器里面
				// console.log(window.location.href);
				let data = {
					url: window.location.href
				}
				let _this = this;
				this.$api.getShareInfo(data, res => {
					if (res.status) {
						_this.$wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
							appId: res.data.appId, // 必填，公众号的唯一标识  
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳  
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串  
							signature: res.data.signature, // 必填，签名，见附录1  
							jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"]
						});
						_this.$wx.ready(function() {
							let shareInfo = {
								title: "首页",
								desc: "首页",
								imgUrl: _this.config.shop_default_image
							}
							// 分享朋友
							_this.$wx.updateAppMessageShareData(shareInfo);
							// 分享朋友圈
							_this.$wx.updateTimelineShareData(shareInfo);
						})
					}
				});

			},

			hreftwo(name) {
				if (name == "首页") {
					this.$common.navigateTo("/pages/store/index");
				} else if (name == "分类") {
					this.$common.navigateTo("/pages/classify/classify")
				}else if (name == "房象找新房") {
					this.$common.navigateTo("/pages/index/index");
				}else if(name == "购物车"){
					this.$common.navigateTo("/pages/cart/index/index")
				}else if(name == "我的"){
					this.$common.navigateTo("/pages/member/index/index");
					// uni.switchTab({
					// 	url: '/pages/member/index/index'
					// });
				}
			},
		},
		onPullDownRefresh() {
			this.initData();
			uni.stopPullDownRefresh();
		},
		//分享
		onShareAppMessage() {
			return {
				title: this.$store.state.config.share_title,
				// #ifdef MP-ALIPAY
				desc: this.$store.state.config.share_desc,
				// #endif
				imageUrl: this.$store.state.config.share_image,
				path: this.shareUrl
			};
		},
		// #ifdef MP-WEIXIN || APP-PLUS || APP-PLUS-NVUE
		onPageScroll() {
			var _this = this;
			const query = uni.createSelectorQuery();
			query
				.select('.content >>> .search')
				.boundingClientRect(function(res) {
					if (res) {
						if (res.top < 0) {
							_this.$store.commit('searchFixed', true);
						} else {
							_this.$store.commit('searchFixed', false);
						}
					}
				})
				.exec();
		}
		//#endif
	};
</script>

<style>
	.cell-item {
		border: none;
	}

	.cell-ft-text {
		font-size: 22upx;
		color: #999;
	}

	.service {
		width: 80rpx;
		height: 80rpx;
		background-color: #fff;
		border-radius: 50%;
		position: fixed;
		right: 30rpx;
		bottom: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 0 10rpx #ccc;
		padding: 0;
		z-index: 996;
	}

	.service .icon {
		width: 60rpx;
		height: 60rpx;
	}

	.subscription-notice {
		background-color: #ffffff;
		box-shadow: 0 2rpx 18rpx #eeeeee;
		position: relative;
		z-index: 99;
		height: 66rpx;
		line-height: 66rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.subscription-notice>view {
		display: flex;
		align-items: center;
	}

	.subscription-notice .icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	.subscription-notice-btn {
		color: #4285f4;
	}

	.subscription-notice-btn-close {
		color: #888888;
		padding-left: 10px;
		font-size: 30upx;
	}



	/* 底部 */
	.base{
		width: 100%;
		height: 100rpx;
		bottom: 0;
		background: #fff;
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: space-around;
		border-top: 1px solid #cdd7e1;
	}
	.base .store .store-img{
		height: 48upx;
		width: 48upx;
		margin: 0 auto;
		margin-top: 10upx;
	}
	.base .store .store-img>img{
		width: 100%;
		height: 100%;
	}
</style>

<style>
.cell-item {
	border: none;
}
.cell-ft-text {
	font-size: 22upx;
	color: #999;
}
.askl{
	padding-bottom: 100upx;
}
.img-grids,.img-list{
	background-color: #fff;
}
.img-grids-item{
	display: inline-table;
	margin-top: 0;
	margin-bottom: 14upx;
}
.column3 .img-grids-item{
	width: 230upx;
	height: 364rpx !important;
	margin: 15upx;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 6upx;
}
.column3 .img-grids-item:nth-child(3n){
	margin-right: 15upx;
}
.column3 .img-grids-item-t{
	width: 230upx;
	height: 230upx;
}
.column3 .grids-goods-name{
	font-size: 24upx;
}
.column3 .img-grids-item-b{
	padding: 0 8upx 8upx;
}
.column3 .goods-price{
	font-size: 26upx;
}
.slide3 .img-grids-item{
	width: 200upx;
}
.slide3 .img-grids-item-t{
	width: 200upx;
	height: 200upx;
}
.slide3 .grids-goods-name{
	font-size: 24rpx;
	/* height: 66rpx; */
	height: 50rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.index-goods .img-grids-item{
	display: inline-block;
	margin-top: 0;
}
.index-goods .img-list-item{
	padding: 0upx 26upx;
	margin-bottom: 14upx;
}
.index-goods .img-list{
	padding-bottom: 10upx;
}
</style>

<style>
	.imgnavbar {
		width: 100%;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.imgnavbar-list {
		overflow: hidden;
		padding: 24upx 0 0;
	}

	/* 堆积两列 */
	.imgnavbar-list .imgnavbar-item {
		height: auto;
		float: left;
		padding: 0upx 10upx;
		margin-bottom: 20upx;
		text-align: center;
	}

	.imgnavbar-list .imgnavbar-item image {
		width: 90upx;
		height: 90upx;
		margin-bottom: 6upx;
	}

	.imgnavbar-item-text {
		font-size: 26upx;
		color: #666;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.imgnavbar-list.row3 .imgnavbar-item {
		width: 33.3%;
	}

	.imgnavbar-list.row4 .imgnavbar-item {
		width: 25%;
	}

	.imgnavbar-list.row5 .imgnavbar-item {
		width: 20%;
	}

	.imgnavbar-list.row5 .imgnavbar-item .imgnavbar-item-text {
		font-size: 24upx;
	}
</style>

